<template>
  <div class="virtual-time-picker" @click.stop="">
    <StyleTimePicker
      v-bind="$attrs"
      @toggleMenu="toggleMenu"
      @clear="clear"
      v-model="bindValue"
    ></StyleTimePicker>
    <div :id="renderId"></div>
  </div>
</template>

<script>
  import { nanoid } from '@/utils';
  import StyleTimePicker from './StyleTimePicker.vue';
  export default {
    name: 'VSelector',
    components: {
      StyleTimePicker,
    },
    inheritAttrs: false,
    emits: ['update:modelValue', 'clear'],
    props: {
      modelValue: {
        type: [Array, String],
        default: [],
      },
    },
    data() {
      return {
        renderId: nanoid(8),
        CommonTimePicker: this.$root.$refs['CommonTimePicker'],
      };
    },
    computed: {
      bindValue: {
        get() {
          return this.modelValue;
        },
        set(val) {
          this.$emit('update:modelValue', val);
        },
      },
    },
    methods: {
      toggleMenu() {
        this.CommonTimePicker.toggleMenu({
          renderId: this.renderId,
          curInstance: this,
          attrs: this.$attrs,

          curValue: this.modelValue,
          isObjectValue: this.isObjectValue,
          OpsData: this.OpsData,
        });
      },
      // 不要删除，给CommonTimePicker调用
      updateValue(val) {
        this.$emit('update:modelValue', val);
      },
      clear() {
        this.$emit('clear');
      },
    },
  };
</script>

<style lang="scss" scoped>
  .virtual-time-picker {
    position: relative;
  }
</style>
